<template>
	<view class="topic-detail-con">
		<view class="detail-top">
			<view class="tit ellip">#中国学术科研之我见</view>
			<view class="t1">话题简介字数限制40，话题简介字数限制40，话题简介字数限制40，话题简介字数限制40。</view>
			<view class="detail-join flex align-center">
				<view class="join-num flex flex-sub">
					<view class="cases flex align-center"><image src="../../static/images/img-1.png" class="img1"></image><text>432条动态</text> </view>
					<view class="cases flex align-center"><image src="../../static/images/img-2.png" class="img1"></image><text>45人参与</text> </view>
				</view>
				<view class="join-btn" @click="comment">参与话题</view>
			</view>
		</view>
		<view class="scroll-box" :style="{height:scrollHeight + 'rpx'}" style="position: relative;">
			<scroll-view class="scroll-content" scroll-y="true"   :scroll-into-view="scrollIntoId" :style="{height:scrollHeight + 'rpx'}" @touchmove.stop.prevent>
				<view style="padding: 32rpx 0 10rpx;">
					<view class="cases" v-for="(item,index) in 10" :key='index'>
						<view class="top-con flex"><text class="flex-sub">#给Elsevier打call</text><text>2021年9月16日</text></view>
						<view class="t1">在学术道路上爱思唯尔帮助了很多，有这么一个平台浏览内容学术内容很有用</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var com = require('@/common/com.1.0.js');
	export default {
		data() {
			return {
				scrollHeight: '',
			};
		},
		onLoad() {
			this.scrollh();
		},
		methods:{
			comment(){
				com.toUrl('comment')
			},
			// 获取滚动条高度
			scrollh: function () {
			  var _this = this;
			  setTimeout(function() {
			  	uni.getSystemInfo({
			  	  success: function (res) {
					_this.scrollHeight = (750 * res.windowHeight / res.windowWidth) - 280
			  	  }
			  	})
			  }, 300);
			},
		}
	}
</script>
<style lang="scss" scoped>
.topic-detail-con{
	.detail-top{
		padding: 0 32rpx;
		background-color: #F0F0F0;
		.tit{
			font-size: 50rpx;
			font-weight: bold;
			padding: 16rpx 0;
		}
		.t1{
			color: #595959;
		}
	}
	.detail-join{
		padding: 16rpx 0 24rpx;
		.join-btn{
			width: 176rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #FE6C02;
			border-radius: 32rpx;
			color: #fff;
			text-align: center;
		}
		.join-num{
			.cases{
				font-size: 26rpx;
				color: #595959;
				margin-right: 32rpx;
				.img1{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}
	.scroll-box{
		background-color: #F0F0F0;
		.scroll-content{
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			.cases{
				width: 638rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				margin:0 auto 16rpx;
				padding: 16rpx 24rpx 24rpx;
				.top-con{
					color: #8C8C8C;
					font-size: 26rpx;
				}
				.t1{
					margin-top: 8rpx;
				}
			}
		}
	}
}
</style>
